<script setup lang="ts">
import {LeftCircleOutlined, RightCircleOutlined} from '@ant-design/icons-vue';
import {onBeforeMount, ref} from "vue";
import {getHomeCarouselByLevel} from "@/api/home/home";
import {ECode, PagePath} from "@/util/commonUtil";

const slideList = ref<any>([])
const emit = defineEmits(['isFirstRecommendShow']);

onBeforeMount(() => {
  getSlideList()
})

function getSlideList() {
  let params = new URLSearchParams();
  params.append("level", String(1));
  params.append("useSort", String(1));
  getHomeCarouselByLevel(params).then((res: any) => {
    if (res.code === ECode.SUCCESS) {
      slideList.value = res.data.records;
      // 当没有数据时，进行触发回调函数
      if (slideList.value.length > 0) {
        emit("isFirstRecommendShow", true);
      } else {
        emit("isFirstRecommendShow", false);
      }
    }
  })
}
</script>

<template>
  <section class="homeCarousel relative overflow-hidden w-full h-full float-left rounded-xl">
    <a-carousel arrows autoplay>
      <template #prevArrow>
        <div class="custom-slick-arrow" style="left: 15px; z-index: 1">
          <left-circle-outlined/>
        </div>
      </template>
      <template #nextArrow>
        <div class="custom-slick-arrow" style="right: 15px">
          <right-circle-outlined/>
        </div>
      </template>
      <template v-for="item in slideList">
        <a :href="item.type == '0' ? PagePath.PostInfoPath + item.uid : item.outsideLink"
           :target="item.outsideLink?'_blank': ''"
           class="relative text-white hover:text-black rounded-xl">
          <img class="w-full h-full block cursor-pointer rounded-xl"
               v-if="item.photoList"
               :src="item.photoList[0]"
               v-lazy="item.photoList[0]"
               :alt="item.title">
          <div class="cursor-pointer absolute w-full text-center z-10 bottom-10 h-10">
            <span class="flex justify-center items-center text-[1.5rem]">{{ item.title }}</span>
          </div>
          <div class="mask absolute top-0 bottom-0 left-0 right-0 rounded-xl hover:opacity-35"></div>
        </a>
      </template>
    </a-carousel>
  </section>
</template>

<style scoped lang="less">
:deep(.slick-slide) {
  border-radius: 0.75rem;
}

:deep(.slick-arrow.custom-slick-arrow) {
  font-size: 30px;
  color: #000000;
  transition: ease all 0.3s;
  opacity: 0.3;
  z-index: 1;
  border-radius: 0.75rem;
}

:deep(.slick-arrow.custom-slick-arrow:before) {
  display: none;
}

:deep(.slick-arrow.custom-slick-arrow:hover) {
  color: #fff;
  opacity: 1;
}

:deep(.slick-slide h3) {
  color: #fff;
}

@media (max-width: 1024px) {
  .homeCarousel{
    padding-inline: 1rem;
  }
}
</style>
